<template>
     <!-- cell-card -->
     <van-cell-group class="wait_pay">
      <van-row justify="center">
        <van-col span="5">
          <span class="h2">待付款</span>
        </van-col>
      </van-row>
      <van-row justify="center">
        <van-col>
          <span class="text"
            >请在
            <span class="time">
              <van-count-down :time="time" @change="finish_time">
                <template #default="timeData">
                  <span class="block">{{ timeData.minutes }}分</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}秒</span>
                </template>
              </van-count-down>
            </span>
            内完成支付,过时订单将会取消。</span
          >
        </van-col>
      </van-row>
      <van-row justify="center">
        <van-col>
          <span class="btn">
            <van-button
              type="default"
              class="btn1"
              plain
              size="small"
              @click="cancelOrder"
              >取消订单</van-button
            >
            <van-button
              type="warning"
              class="btn2"
              plain
              size="small"
              @click="gopay"
              >去支付</van-button
            >
          </span>
        </van-col>
      </van-row>
    </van-cell-group>
</template>

<script setup>
// 传入hooks
import {useCancelOrder} from '@/hooks/cart/useCart' 
const { onClickLeft,
    time,
    finish_time,
    cancelOrder,
    gopay
} =useCancelOrder()
</script>

<style lang="scss" scoped>
// wait pay card
.wait_pay {
  .h2 {
    font-size: 0.55rem;
    margin-top: 0.5rem;
    display: block;
  }
  .text {
    font-size: 0.4rem;
  }
  .time {
    color: rgba(144, 192, 239, 1);
    .van-count-down {
      display: inline-block;
      color: rgba(144, 192, 239, 1);
    }
  }
  .btn {
    display: block;
    margin-bottom: 0.5rem;
    text-align: center;
    .van-button {
      width: 2.6rem;
      margin-right: 0.4rem;
    }
  }
}
</style>